<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
	<title>
		response
	</title>
	<!-- <link rel="stylesheet" type="text/css" href="css/lottery.css"> -->
	<style type="text/css">
		ul {
		  margin: 0px;
		  padding: 0px;
		  width: 100%;
		  margin-top: 50px;
		}
		li {
		  list-style: none;
		  border-bottom: 1px solid #EFEFEF;
		}
		p{
			margin: 5px;
			color:#1c313d;

		}
		.media-body{
			display: inline-block;
			color: #4EBAFA;

		}
		h1{
			color: #4EBAFA;
			font-weight: normal;
			white-space:nowrap;
			width:100%;
			overflow:hidden;
			margin-top: 5px;
			font-size: 16px;
			text-overflow:ellipsis;
		}
		.left, .right{
			margin:5px 10px;
		}
		.old .left{
			float: left;
		}
		.old .right{
			float: right;
		}
		.old .media-body{
			width: 60%;
		}

		.container{
			/*旧版*/
		 	display: -webkit-box;
		 	display: -moz-box;
		 	/*混合版*/
		 	display: -ms-flexbox;
		 	/*新版*/
		 	display: -webkit-flex;
		 	display: flex;
		}
		.media-body{
			flex:1;
		}
		.right{
			order:1;
		}
	</style>
</head>
<body>
	<nav class="old">
		<ul>
			<li>
				    <img class="left" src="imgs/yu.png" height="35" width="35">
				    <img class="right" src="imgs/yu.png" height="45" width="45">
				     <div class="media-body">
				        <h1>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</h1>
				        <p>哎呦，不错喔</p>
				    </div>
			</li>
		</ul>
	</nav>

	<nav class="Flex">
		<ul>
			<li class="container">
				    <img class="left" src="imgs/yu.png" height="35" width="35">
				    <img class="right" src="imgs/yu.png" height="45" width="45">
				     <div class="media-body">
				        <h1>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</h1>
				        <p>哎呦，不错喔</p>
				    </div>
			</li>
		</ul>
	</nav>

</body>
</html>